<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
	<title>我的订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<style>
		/* 订单页面样式 */
		.order-page {
			min-height: calc(100vh - 200px);
			background: #f8f9fa;
			padding: 60px 0;
		}
		
		.order-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		/* 成功提示样式 */
		.success-message {
			background: #f0fff4;
			color: #2f855a;
			padding: 12px 16px;
			border-radius: 8px;
			margin-bottom: 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			border: 1px solid #c6f6d5;
		}
		
		/* 空订单提示 */
		.empty-order {
			background: #ebf8ff;
			color: #2c5282;
			padding: 16px;
			border-radius: 8px;
			text-align: center;
			font-size: 16px;
			border: 1px solid #bee3f8;
		}
		
		/* 标题样式 */
		.order-title {
			color: #333;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 30px;
		}
		
		/* 订单表格样式 */
		.order-table {
			width: 100%;
			background: white;
			border-radius: 12px;
			box-shadow: 0 2px 15px rgba(0,0,0,0.08);
			overflow: hidden;
		}
		
		.order-table thead {
			background: #f7fafc;
		}
		
		.order-table th {
			padding: 16px;
			text-align: left;
			color: #4a5568;
			font-weight: 500;
			font-size: 14px;
			border-bottom: 2px solid #e2e8f0;
		}
		
		.order-table td {
			padding: 16px;
			border-bottom: 1px solid #e2e8f0;
			color: #2d3748;
			font-size: 14px;
			vertical-align: top;
		}
		
		.order-table tr:last-child td {
			border-bottom: none;
		}
		
		/* 订单信息样式 */
		.order-info {
			margin: 0;
			line-height: 1.6;
		}
		
		.order-info p {
			margin: 0 0 8px 0;
		}
		
		.order-info p:last-child {
			margin-bottom: 0;
		}
		
		/* 状态标签样式 */
		.status-tag {
			display: inline-block;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 13px;
			font-weight: 500;
		}
		
		.status-unpaid {
			background: #fff5f5;
			color: #e53e3e;
		}
		
		.status-paid {
			background: #f0fff4;
			color: #2f855a;
		}
		
		.status-shipping {
			background: #ebf8ff;
			color: #2c5282;
		}
		
		.status-completed {
			background: #f7fafc;
			color: #4a5568;
		}
		
		/* 支付按钮样式 */
		.pay-button {
			display: inline-block;
			padding: 8px 16px;
			background: #4CAF50;
			color: white;
			border: none;
			border-radius: 6px;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		
		.pay-button:hover {
			background: #45a049;
			transform: translateY(-1px);
		}
		
		/* 支付方式样式 */
		.payment-type {
			display: inline-block;
			padding: 4px 8px;
			border-radius: 4px;
			background: #f7fafc;
			color: #4a5568;
			font-size: 13px;
		}
		
		/* 响应式调整 */
		@media (max-width: 1024px) {
			.order-table {
				display: block;
				overflow-x: auto;
			}
			
			.order-container {
				padding: 0 15px;
			}
		}
		
		@media (max-width: 768px) {
			.order-page {
				padding: 40px 0;
			}
			
			.order-title {
				font-size: 20px;
				margin-bottom: 20px;
			}
			
			.order-table th,
			.order-table td {
				padding: 12px;
				font-size: 13px;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
	
	<jsp:include page="header.jsp"/>
	
	<!--orders-->
	<div class="order-page">
		<div class="order-container">
			<c:if test="${msg!=null}">
				<div class="success-message">${msg}</div>
			</c:if>
			
			<c:if test="${orderList!=null}">
				<h2 class="order-title">我的订单</h2>
				
				<table class="order-table">
					<thead>
						<tr>
							<th width="8%">订单号</th>
							<th width="10%">总价</th>
							<th width="25%">商品详情</th>
							<th width="20%">收货信息</th>
							<th width="12%">订单状态</th>
							<th width="10%">支付方式</th>
							<th width="15%">下单时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="order" items="${orderList}">
							<tr>
								<td>
									<div class="order-info">
										<p>#${order.id}</p>
									</div>
								</td>
								<td>
									<div class="order-info">
										<p>¥${order.total}</p>
									</div>
								</td>
								<td>
									<div class="order-info">
										<c:forEach var="item" items="${order.itemList}">
											<p>${item.good.name}(¥${item.price}) x ${item.amount}</p>
										</c:forEach>
									</div>
								</td>
								<td>
									<div class="order-info">
										<p>${order.name}</p>
										<p>${order.phone}</p>
										<p>${order.address}</p>
									</div>
								</td>
								<td>
									<c:choose>
										<c:when test="${order.status==1}">
											<span class="status-tag status-unpaid">未付款</span>
										</c:when>
										<c:when test="${order.status==2}">
											<span class="status-tag status-paid">已付款</span>
										</c:when>
										<c:when test="${order.status==3}">
											<span class="status-tag status-shipping">配送中</span>
										</c:when>
										<c:when test="${order.status==4}">
											<span class="status-tag status-completed">已完成</span>
										</c:when>
									</c:choose>
								</td>
								<td>
									<span class="payment-type">
										<c:choose>
											<c:when test="${order.paytype==1}">微信</c:when>
											<c:when test="${order.paytype==2}">支付宝</c:when>
											<c:when test="${order.paytype==3}">货到付款</c:when>
										</c:choose>
									</span>
								</td>
								<td>
									<div class="order-info">
										<p><fmt:formatDate value="${order.systime}" pattern="yyyy-MM-dd HH:mm:ss" /></p>
									</div>
								</td>
								<td>
									<c:if test="${order.status==1}">
										<a href="topay?orderid=${order.id}" class="pay-button">支付</a>
									</c:if>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</c:if>
			
			<c:if test="${orderList==null}">
				<div class="empty-order">还没有订单，快去购物吧！</div>
			</c:if>
		</div>
	</div>
	<!--//orders-->
	
	<jsp:include page="footer.jsp"/>

</body>
</html>